import { cityComparison } from '@/api/inter/index.js'
import textOver from "@/components/echarts/echartsUtil/index"
import { onMounted, reactive, ref } from "vue"
import {
  chartsOptions,
  BarECOption,
  PieECOption,
  GaugeECOption,
  EChartsOption,
  BarLineECOption,
  ChartsEvents
} from "@/components/echarts";
import { color3, color4 } from "@/components/echarts/colorType"
import { ZRColor } from "echarts/types/dist/shared";
/**
 * 
 */
export const useStatisDeviceByUserObject = () => {

  const options = chartsOptions<BarLineECOption>({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    yAxis: [{
      type: 'value',
      name: '人数（万人）'
    },
    {
      type: 'value',
      name: ''
    }],
    xAxis: {
      data: []
    },
    legend: {
      top: "2%",
      right: "0%",
    },
    grid: { bottom: "40px", right: "5%", left: "5%" },
    series: [
      {
        type: 'bar',
        data: [],
        itemStyle: {}
      },
      {
        type: 'bar',
        data: [],
        itemStyle: {}
      },
      {
        type: 'line',
        data: []
      }
    ]
  });
  // let  itemStyle={
  let colors: ZRColor = {
    type: "linear",
    x: 0,
    x2: 0,
    y: 0,
    y2: 1,
    colorStops: color3
  }
  let colors2: ZRColor = {
    type: "linear",
    x: 0,
    x2: 0,
    y: 0,
    y2: 1,
    colorStops: color4
  }
  // }
  let objs = ref(null)
  const init = async (data) => {

    const xData = [];
    const sData = [];
    const nData = [];
    let lData = []

    let { data: dataNow } = await cityComparison(data)
    objs.value = dataNow


    dataNow.map(item => {
      xData.push(item.name)
      sData.push(item.numberAdmissions)
      nData.push(item.participants)
      lData.push(item.enrollmentRate)
    })
    options.xAxis = {
      data: xData, axisLabel: {
        interval: 0, formatter: function (value)  //X轴的内容
        {
          return textOver(value)

        }
      }
    }
    options.series = [{ type: 'bar', name: '', itemStyle: { color: colors }, barWidth: '10%', data: sData }, { type: 'bar', name: '', data: nData, itemStyle: { color: colors2 }, barWidth: '15%', }, { type: 'line', name: '', yAxisIndex: 1, data: lData, itemStyle: { color: '#F59A23' } }];

  };

  const selectchanged = (params: ChartsEvents.Events["selectchanged"]) => {

  };

  const handleChartClick = (params: string) => {

  };

  onMounted(() => {
    // init();
  });
  return {
    options,
    objs,
    selectchanged,
    handleChartClick,
    init
  };
};